<template>
  <div class="v2ex-tab">
    <div :class="'tab '+(index==0?'v2ex-active':'')" v-for="(tab,index) in tabList" :key="tab.name"
      @click="handleClick(tab,$event)"
    >{{tab.name}}</div>
  </div>
</template>

<script>
  export default{
    name : 'v2ex-tab',
    data (){
      return {
        historyTab : null
      }
    },
    props : {
      tabList : Array
    },
    mounted : function () {
      this.handleClick(this.tabList[0],null)
    },
    methods : {
      handleClick(tab,e) {
        if(e !== null){
          let obj = e.currentTarget;
          if(obj !== this.historyTab){
            this.$emit('onTabClick', tab);
            obj.className = 'tab v2ex-active';
            this.historyTab.className = 'tab';
            this.historyTab = obj;
          }
        }else{
          this.$emit('onTabClick', tab);
          this.historyTab = document.getElementsByClassName('tab v2ex-active')[0];
        }
      },
    }
  }
</script>

<style scoped>
  .v2ex-tab{
    min-width: 600px;
    max-width: 1100px;
    margin: 0 auto 0 auto;
    background: white;
    display: flex;
    border-bottom: 1px solid #e2e2e2;
  }
  .tab{
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    width: 50px;
    height: 20px;
    border: 1px solid black;
    border-radius: 20px;
    background: white;
    color: black;
    margin: 10px 12px;
  }
  .v2ex-active{
    background: #5CACEE;
    color: white;
    border: 1px solid #5CACEE;
  }
</style>
